<template>
  <Dialog :title="title" :visible="visible" :reveal="reveal" class="two-columns" @close="close">
    <!-- 订单详情 -->
    <UserInfo :info-id="customerId" />
    <div>
      <span style="width: 44%;display: inline-block;">订单编号 {{ orderDetails.orderCode }}</span>
      <span style="width: 45%;display: inline-block;">开单时间 {{ orderDetails.createdTime }}</span>
    </div>
    <div>
      <span style="width: 44%;display: inline-block;">开单人 {{ orderDetails.orderMan }}</span>
      <span style="width: 45%;display: inline-block;">订单状态 {{ orderDetails.orderStatus }}</span>
    </div>
    <ul>
      <li class="detailed">商品清单：</li>
      <li v-for="(item, index) of orderDetails.orderList" :key="index" class="lisTop">
        <el-row style="width: 5%">
          {{ index + 1 }}
        </el-row>
        <el-row style="width: 95%">
          <el-row type="flex">
            <el-col :span="22" class="product">
              <el-button class="bg" type="text" style="height: 25px;line-height: 8px;margin-top: 12px;">{{
                item.productAttrib.slice(0, 2)
              }}</el-button>
              <p style="margin: 0px 10px">{{ item.projectName }}</p>
              <el-button v-if="item.productAttrib === '套餐类'" class="bg" style="height: 25px;line-height: 8px;margin-top: 12px;" type="text" @click="seeData(item)">详情</el-button>
            </el-col>
            <el-col :span="1">x {{ item.contentCount }}</el-col>
          </el-row>
          <el-row class="grey">
            <span>规格：{{ item.specl }}</span>
            <span>单位：{{ item.unit }}</span>
            <span>使用次数：{{ item.usageCount }}</span>
          </el-row>
          <el-row type="flex" class="price">
            <el-col :span="6"> 售价：￥{{ item.price }} </el-col>
            <el-col v-if="item.discountRate" :span="6">
              折扣率：{{ item.discountRate }}%
            </el-col>
            <el-col v-if="item.discountRate" :span="6">
              折后价：￥{{ item.discountPrice }}
            </el-col>
            <el-col :span="6"> 主治医生：{{ item.attendingDoctor }} </el-col>
          </el-row>
        </el-row>
      </li>
    </ul>
    <el-row>
      <el-col :offset="18" :span="6">总额：￥{{ orderDetails.orderList | calculatePrice(1) }}</el-col>
      <el-col :offset="18" :span="6">优惠：-￥{{ orderDetails.orderList | calculatePrice(2) }}</el-col>
      <el-col :offset="18" :span="7">合计：<span class="span">￥{{ orderDetails.orderList | calculatePrice(3) }}</span></el-col>
    </el-row>
    <!-- <el-row>
      <el-col :span="6">付款方式： {{ orderDetails.orderPaymentStyle }}</el-col>
      <el-col :span="6">退款金额：￥{{ orderDetails.refundAmount }}</el-col>
    </el-row>
    <el-row>
      <el-col v-if="orderDetails.orderPaymentStyle !== '全款'" :span="6">定金支付： {{ orderDetails.depositAmount }}元</el-col>
      <el-col v-if="orderDetails.orderPaymentStyle !== '全款'" :span="6">尾款支付： {{ orderDetails.balancePayment }}元</el-col>
    </el-row> -->
    <el-row style="margin-bottom: 21px">
      <el-col>付款方式： {{ orderDetails.orderPaymentStyle }}</el-col>
      <el-col v-if="orderDetails.orderPaymentStyle!=='全款'" :span="6">定金支付： {{ orderDetails.depositAmount }}元</el-col>
      <el-col v-if="orderDetails.orderPaymentStyle!=='全款'" :span="6">尾款支付： {{ orderDetails.balancePayment }}元</el-col>
      <el-col v-if="orderDetails.orderStatus==='已退款'">退款金额：￥{{ orderDetails.refundAmount }}</el-col>
    </el-row>
    <div class="all-margin-bottom" />
    <el-dialog width="40%" title="套餐详情" :visible.sync="innerVisible" append-to-body>
      <mealDetails :details-id="detailsId" />
    </el-dialog>
  </Dialog>
</template>
<script>
import Dialog from "@/components/Dialog";
import UserInfo from "@/components/UserInformation";
import { calculatePrice, detailPrice } from "@/api/fifters.js";
import mealDetails from "@/components/mealDetails";
export default {
  components: {
    Dialog,
    UserInfo,
    mealDetails,
  },
  filters: {
    calculatePrice(arr, number) {
      return calculatePrice(arr, number);
    },
    detailPrice(arr, number) {
      return detailPrice(arr, number);
    },
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    orderDetailsId: {
      type: [Number, String],
      default: "",
    },
    customerId: {
      type: [Number, String],
      default: "",
    },
  },
  data() {
    return {
      title: "查看订单详情",
      reveal: false,
      orderDetails: {},
      innerVisible: false,
      detailsId: [],
    };
  },
  watch: {
    orderDetailsId: {
      handler(newId) {
        console.log("车厢内疯狂的虹口dsahbd ", newId);
        this.fetchDetail(newId);
      },
      deep: true,
    },
  },
  methods: {
    async seeData(row) {
      this.detailsId = row.projectId;
      this.innerVisible = true;
    },
    close() {
      this.$emit("seeDetails", false);
    },
    fetchDetail(id) {
      // 获取订单详情
      this.orderDetails = {};
      this.$api["doctor/consulting/orderDetail"]({ id }).then((res) => {
        if (res.code !== 200) return;
        console.log(res, "详情department/projectmenu");
        this.orderDetails = res.data;
        // this.addPriceMutations(this.datas);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import '../../../lobby/orderOpened/order.scss';
.el-row,
span {
  line-height: 45px;
}
li {
  display: flex;
  margin-bottom: 15px;
}
</style>
